<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="全景图标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入全景图标题" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="" prop="buildingNo">
        <el-input
          v-model="queryParams.buildingNo"
          placeholder="请输入"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="楼层" prop="floorId">
        <el-select v-model="queryParams.floorId" placeholder="请选择楼层" clearable size="small">
          <el-option v-for="dict in floorArr" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" border :data="list">
      <el-table-column key="title" label="全景图标题" align="center" prop="title" />
      <el-table-column key="mapName" label="所在楼层" align="center" prop="mapName" />
      <el-table-column key="floorTitle" label="展示楼层名称" align="center" prop="floorTitle" />
      <el-table-column key="panoramaPathurl" label="全景图" align="center" prop="panoramaPathurl">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.panoramaPathurl" :fit="'fill'"></el-image>
        </template>
      </el-table-column>
      <el-table-column key="previewPathurl" label="预览图" align="center" prop="previewPathurl">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.previewPathurl" :fit="'fill'"></el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column key="" label="" align="center" prop="" /> -->
      <!-- <el-table-column key="" label="" align="center" prop="" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="" class="delcolor" @click="handleDel(scope.row)">
            删除
          </el-button>
          <el-button size="small" type="text" icon="" @click="handleEdit(scope.row, 'edit')">
            修改
          </el-button>
          <el-button size="small" type="text" icon="" @click="handleEdit(scope.row, 'hotpot')">
            热点管理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page-sizes="[20, 40, 60, 80]" :page.sync="queryParams.page.current"
      :limit.sync="queryParams.page.size" @pagination="getList" />
    <popCom :id="chosid" :visible.sync="show" @close="close" :objTarget="objTarget" :popTitle="popTitle" />
  </div>
</template>

<script>
import pagination from "@/components/Pagination";
import popCom from "./components/add.vue";
import { panoramaList, deletePanorama } from "@/api/pannellum";
import { getfloorArr } from "@/api/map";
export default {
  name: "Home",
  components: {
    pagination,
    popCom,
  },
  data() {
    return {
      queryParams: {
        title: "",
        floorId: null,
        page: {
          searchCount: true, // 是否显示搜索数量
          current: 1, // 当前页
          size: 20,
        },
      },
      loading: false,
      list: [],
      total: 0,
      show: false,
      chosid: null,
      objTarget: "",
      floorArr: [],
      popTitle: "",
    };
  },
  mounted() {
    this.handleQuery();
    this.requestfloorArr(0);
  },
  methods: {
    requestfloorArr(id) {
      this.floorArr = [];
      getfloorArr(id)
        .then((res) => {
          if (res.success) {
            const arr = res?.data ?? [];
            if (arr.length > 0) {
              arr.map((item) => {
                const obj = {
                  label: item.mapName,
                  value: item.mapId,
                };
                this.floorArr.push(obj);
              });
            }
          }
        })
        .catch((err) => { });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.queryParams = {
        title: "",
        floorId: null,
        page: {
          searchCount: true, // 是否显示搜索数量
          current: 1, // 当前页
          size: 20,
        },
      };
      this.handleQuery();
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      panoramaList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.success) {
          this.list = res?.data ?? [];
          this.total = res?.page?.total ?? 0;
        }
      });
    },
    handleAdd() {
      this.show = true;
      this.chosid = null;
      this.popTitle = "新增全景图";
    },
    close(status) {
      this.show = false;
      this.chosid = null;
      setTimeout(() => {
        if (status) {
          this.handleQuery();
        }
      }, 200);
    },
    handleDel(row) {
      const text = "确定删除该建筑信息?";
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.requestDel(row.sceneId);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    requestDel(sceneId) {
      deletePanorama(sceneId)
        .then((res) => {
          if (res.success) {
            this.handleQuery();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "删除失败!",
          });
        });
    },
    handleEdit(row, type) {
      switch (type) {
        case "edit":
          this.popTitle = "编辑全景图";
          break;
        case "hotpot":
          this.popTitle = "热点管理";
          break;
        default:
          break;
      }
      this.show = true;
      this.chosid = row.sceneId;
      this.objTarget = JSON.stringify(row);
    },
  },
};
</script>

<style lang="scss" scoped></style>
